<!-- 之前的分组配置保存 -->
<template>
  <!--
    :groupDisplayType="'groupRows'"
    -->
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type CellStyle, type GridOptions } from 'ag-grid-community'

interface IData {
  orderNo: string
  patientId: string
  name: string
  age: string
  inpatientWard: string
  drugName: string
  drugSpec: string
  drugUsage: string
}

import json from './data/row-spanning.json'

const gridOptions = ref<GridOptions<IData>>({
  rowData: json as IData[],
  columnDefs: [
    {
      field: 'orderNo',
      headerName: '订单编号',
      cellStyle: (params) => {
        const style: CellStyle = {}
        if (params.data?.orderNo === 'o_00000001') {
          style.backgroundColor = '#f0f0f0'
        }
        return style
      },
      spanRows: true,
      sort: 'asc',
    },
    {
      field: 'patientId',
      headerName: '患者编号',
      rowGroup: true,
      hide: true,
      valueFormatter: (params) => {
        return `患者: ${params.value}`
      },
      spanRows: true,
    },
    { field: 'name', headerName: '患者名称', spanRows: true },
    { field: 'age', headerName: '患者年龄', spanRows: true },
    { field: 'inpatientWard', headerName: '病区' },
    { field: 'drugName', headerName: '药品名称' },
    { field: 'drugSpec', headerName: '药品规格' },
    { field: 'drugUsage', headerName: '药品剂量' },
  ],
  defaultColDef: {
    flex: 1,
  },
  enableCellSpan: true,
  groupDisplayType: "multipleColumns"
});

</script>

<style scoped></style>
